<template>
    <Button type="error" size="large"
            v-on:click="countdownDo()" v-if="showButton"
            style="height: 45px;">
        <p style="font-size: 18px;">
            <Icon type="md-exit"/>
            退出 / EXIT
            <span style="color: #FA8072">[{{this.$root.countdownReturnTime}} 秒]</span>
        </p>
    </Button>
</template>

<script>
    export default {
        data() {
            return {
                showButton: true,
                router: "/",
            }
        },
        components: {},
        methods: {
            countDownStart(returnTime = 60, router = "/", showButton = "true") {
                clearInterval(this.$root.countdownClock);
                this.router = router;
                this.showButton = showButton;
                this.$root.countdownReturnTime = returnTime;
                this.$root.countdownClock = window.setInterval(() => {
                    this.$root.countdownReturnTime--;
                    if (this.$root.countdownReturnTime < 0) {
                        this.countdownDo();
                    }
                }, 1000)
            },
            countdownDo() {
                clearInterval(this.$root.countdownClock);
                this.$router.push(this.router);
            },
            countdownReset(returnTime = 60) {
                this.$root.countdownReturnTime = returnTime;
            },
        }
    }
</script>

<style scoped>
</style>